<template>
    <div class="seekAdmin">
        <h2 style="text-align: center; margin: 20px">管理员查询</h2>
        <el-form status-icon label-width="100px" class="demo-upAdminsData">
            <el-form-item label="查询的内容">
                <el-input v-model="currentSeekAdminData.value"></el-input>
            </el-form-item>

            <div style="display: flex">
                <el-dropdown
                    @command="handleCommand"
                    style="width: 100px; text-align: right"
                >
                    <span class="el-dropdown-link">
                        管理员状态<i
                            class="el-icon-arrow-down el-icon--right"
                        ></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="已禁用"
                            >已禁用</el-dropdown-item
                        >
                        <el-dropdown-item command="未禁用"
                            >未禁用</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </el-dropdown>
                <input
                    type="text"
                    v-model="currentSeekAdminData.status"
                    disabled
                    height="100%"
                    style="text-align: center"
                />
            </div>

            <el-form-item label="选择查询方式">
                <el-radio-group v-model="currentSeekAdminData.type">
                    <el-radio label="account">账号</el-radio>
                    <el-radio label="phone">手机号</el-radio>
                    <el-radio label="state">管理员状态</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapState: adminsMapState,
    mapMutations: adminsMapMutations,
    mapActions: adminsMapActions,
} = createNamespacedHelpers("admins");
export default {
    data() {
        return {
            currentSeekAdminData: {
                status: "已禁用", //管理员是否被禁用
                value: "",
                type: "account",
            },
        };
    },
    computed: {
        ...adminsMapState(["seekAdminData"]),
    },
    methods: {
        ...adminsMapMutations(["changeSeekAdminData"]),
        ...adminsMapActions(["getAdmins", "seekAdmins"]),

        async submitForm() {
            this.changeSeekAdminData(this.currentSeekAdminData);
            await this.seekAdmins();
            this.$router.push("/System/adminsSystem");
        },

        //选择搜索管理员是否被禁用
        handleCommand(command) {
            this.currentSeekAdminData.status = command;
        },
    },
};
</script>
<style lang="scss">
.seekAdmin {
    width: 50%;
    margin: 0 auto;
    box-shadow: 0 0 5px black;
    padding: 10px;
    .el-form-item {
        margin-top: 20px;
    }
}
.el-dropdown-link {
    cursor: pointer;
}
.el-icon-arrow-down {
    font-size: 12px;
}
</style>